﻿/*
Float clearing goodness from Handcrafted CSS book ------------------------------------------------------------- 
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .group { height: 1%; }
*:first-child+html .group { min-height: 1px; }*/
/*@font-face {
    font-family: 'AdelleBasicBold';
    src: url('../fonts/adellebasic_bold-webfont.eot?') format('eot'),
         url('../fonts/adellebasic_bold-webfont.woff') format('woff'),
         url('../fonts/adellebasic_bold-webfont.ttf') format('truetype'),
         url('../fonts/adellebasic_bold-webfont.svg#webfontll9eFuSn') format('svg');
    font-weight: normal;
    font-style: normal;;
}
#container { max-width: 57.5em; padding: 0 20px; margin: 0 auto;}

h1, h2, h3, p { color: #333; margin-bottom: 20px; }
h1, h2 { font-family: 'AdelleBasicBold', Arial, sans-serif;behavior: url(/PIE-1.0.0/PIE.htc); }
h1.title { font-size: 68px; letter-spacing: -3px; font-weight: bold; text-align: center; margin: 100px 0 50px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);}

h1.title span { font-size: 38px; line-height: 48px; display: block; letter-spacing: -1px; color: rgba(51, 51, 51, 0.5); }*/

/*
Stacks CSS ----------------------------------------------------------------------------------------------------------- */

/* Layout */
.stack { float: left; width: 80px; margin: 0 2px 2px 0; position: absolute; z-index: 0;padding:2px;behavior: url(/PIE-1.0.0/PIE.htc); }

/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 3px solid #fff; border-radius: 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	
}
.stack:last-of-type { margin-right: 0; }

/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 5px solid #fff; left: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-webkit-transition: 0.3s all ease-out;
	-moz-transition: 0.3s all ease-out;
	transition: 0.3s all ease-out;
	
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */	
.stack:after { top: 8px; z-index: -20;} /* 2nd element in stack (behind image) */

/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before { 
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
	
}
.stack.rotated:after { 
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
	
}	

/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
	
}	
.stack.twisted:after {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
	
}	

/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	transform: rotate(-3deg);
	
}
.stack.rotated-left:after {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-6deg);
	-moz-transform: rotate(-6deg);
	transform: rotate(-6deg);
}

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	
}

/*
iPhone and mobile widths --------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
	.stack { float: none; width: auto; margin-bottom: 35px;}
	h1.title { margin: 15px 0;}
}
/*box nội dung*/
.box-shadow-content {
      -moz-box-shadow: 0 5px 10px #ccc;
      -webkit-box-shadow: 0 5px 10px #ccc;
      box-shadow: 0 5px 10px #ccc;
      zoom: 1;
      width:890px;
      height:400px;
      padding:10px;
      filter:
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=2),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=3),
          progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=10),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=3),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=2),
          progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1);
         -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";         
 
    }  
/*end box nội dung*/